"use client";

import { useState } from "react";
import { notFound } from "next/navigation";
import { cars } from "@/data/cars";
import Link from "next/link";
import CarImageGallery from "@/components/CarImageGallery";
import CarMediaWall from "@/components/CarMediaWall";

interface CarDetailPageProps {
  params: {
    id: string;
  };
}

export default function CarDetailPage({ params }: CarDetailPageProps) {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const car = cars.find((c) => c.id === params.id);

  if (!car) {
    notFound();
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* 面包屑导航 */}
      <nav className="flex mb-6" aria-label="Breadcrumb">
        <ol className="flex items-center space-x-2 text-sm">
          <li>
            <Link href="/" className="text-blue-600 hover:text-blue-800">
              首页
            </Link>
          </li>
          <li className="text-gray-400">/</li>
          <li>
            <Link href="/cars" className="text-blue-600 hover:text-blue-800">
              车辆展示
            </Link>
          </li>
          <li className="text-gray-400">/</li>
          <li className="text-gray-600">
            {car.brand} {car.name}
          </li>
        </ol>
      </nav>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* 图片轮播展示 */}
        <div className="space-y-6">
          <CarImageGallery 
            images={car.media} 
            currentIndex={currentImageIndex}
            onIndexChange={setCurrentImageIndex}
          />
        </div>

        {/* 车辆信息 */}
        <div className="space-y-6">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">
              {car.brand} {car.name}
            </h1>
            <p className="text-2xl font-semibold text-blue-600 mt-2">
              ¥{car.price.toLocaleString()}
            </p>
            <div className="flex items-center space-x-4 mt-4 text-sm text-gray-600">
              <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded">
                {car.year}年款
              </span>
              <span className="bg-green-100 text-green-800 px-2 py-1 rounded">
                {(car.mileage || 0).toLocaleString()}公里
              </span>
              <span className="bg-purple-100 text-purple-800 px-2 py-1 rounded">
                {car.fuelType}
              </span>
              <span className="bg-orange-100 text-orange-800 px-2 py-1 rounded">
                {car.specifications.transmission}
              </span>
            </div>
          </div>

          {/* 基本信息 */}
          <div className="bg-white rounded-lg shadow-sm border p-6">
            <h2 className="text-lg font-semibold mb-4">基本信息</h2>
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <span className="text-gray-500">品牌:</span>
                <span className="ml-2 font-medium">{car.brand}</span>
              </div>
              <div>
                <span className="text-gray-500">型号:</span>
                <span className="ml-2 font-medium">{car.name}</span>
              </div>
              <div>
                <span className="text-gray-500">年份:</span>
                <span className="ml-2 font-medium">{car.year}</span>
              </div>
              <div>
                <span className="text-gray-500">里程:</span>
                <span className="ml-2 font-medium">
                  {(car.mileage || 0).toLocaleString()}公里
                </span>
              </div>
              <div>
                <span className="text-gray-500">燃料类型:</span>
                <span className="ml-2 font-medium">{car.fuelType}</span>
              </div>
              <div>
                <span className="text-gray-500">变速箱:</span>
                <span className="ml-2 font-medium">
                  {car.specifications.transmission}
                </span>
              </div>
              <div>
                <span className="text-gray-500">颜色:</span>
                <span className="ml-2 font-medium">多色可选</span>
              </div>
              <div>
                <span className="text-gray-500">车辆类型:</span>
                <span className="ml-2 font-medium">{car.type}</span>
              </div>
            </div>
          </div>

          {/* 配置特点 */}
          <div className="bg-white rounded-lg shadow-sm border p-6">
            <h2 className="text-lg font-semibold mb-4">配置特点</h2>
            <div className="grid grid-cols-2 gap-2 text-sm">
              {car.features.map((feature, index) => (
                <div key={index} className="flex items-center">
                  <span className="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                  {feature}
                </div>
              ))}
            </div>
          </div>

          {/* 联系卖家 */}
          <div className="bg-white rounded-lg shadow-sm border p-6">
            <h2 className="text-lg font-semibold mb-4">联系卖家</h2>
            <div className="space-y-3">
              <div className="flex justify-between">
                <span className="text-gray-500">联系人:</span>
                <span className="font-medium">张经理</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-500">电话:</span>
                <span className="font-medium">138-0000-0000</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-500">微信:</span>
                <span className="font-medium">autoshow_wechat</span>
              </div>
            </div>
            <button className="w-full mt-4 bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors">
              立即咨询
            </button>
          </div>
        </div>
      </div>

      {/* 媒体墙 */}
      <div className="mt-12">
        <CarMediaWall media={car.media ?? [] } />
      </div>

      {/* 类似车辆 */}
      <div className="mt-12">
        <h2 className="text-2xl font-bold mb-6">类似车辆</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {cars
            .filter((c) => c.id !== car.id && c.brand === car.brand)
            .slice(0, 3)
            .map((similarCar) => (
              <Link key={similarCar.id} href={`/cars/${similarCar.id}`}>
                <div className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow cursor-pointer">
                  <div className="relative aspect-[4/3] bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
                    <div className="text-6xl text-gray-400">
                      {similarCar.brand === "特斯拉"
                        ? "⚡"
                        : similarCar.brand === "奔驰"
                        ? "🏆"
                        : similarCar.brand === "宝马"
                        ? "🔷"
                        : similarCar.brand === "奥迪"
                        ? "🔴"
                        : similarCar.brand === "保时捷"
                        ? "🏁"
                        : "🚗"}
                    </div>
                  </div>
                  <div className="p-4">
                    <h3 className="font-semibold text-lg">
                      {similarCar.brand} {similarCar.name}
                    </h3>
                    <p className="text-blue-600 font-semibold">
                      ¥{similarCar.price.toLocaleString()}
                    </p>
                    <div className="flex items-center space-x-2 mt-2 text-sm text-gray-600">
                      <span>{similarCar.year}年</span>
                      <span>•</span>
                      <span>
                        {(similarCar.mileage || 0).toLocaleString()}公里
                      </span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
        </div>
      </div>
    </div>
  );
}
